<template>
  <div class="sjzl-con">
    <div class="sjzl-top">
      <div class="sjzl-top-title">
        数据库文件分析
      </div>
      <div class="sjzl-top-content">
        <div class="sjzl-top-content-item" v-for="(item, key) in sjzlTopContentItemTitle" :key="key">
          <div class="sjzl-top-content-item-title">
            <div class="sjzl-top-content-item-title-text">{{ item.cardName }}</div>
            <div class="sjzl-top-content-item-title-num">{{ item.cardNum }}</div>
          </div>
          <img class="sjzl-top-content-item-img" :src="getAssetsFile('sjgl', item.cardIcon)" />
        </div>
      </div>
    </div>
    <div class="sjzl-bottom">
      <div class="sjzl-bottom-left">
        <div class="sjzl-bottom-left-title">计划总览</div>
        <div class="sjzl-bottom-left-cont">
          <div class="sjzl-bottom-left-cont-box">
            <div class="sjzl-bottom-left-cont-box-item" v-for="(item, index) in PlanOverview" :key="index">
              <div class="sjzl-bottom-left-cont-box-item-top"> {{ item.pollutionName }} </div>
              <div class="sjzl-bottom-left-cont-box-item-bottom">
                <img class="sjzl-bottom-left-cont-box-item-bottom-imgs"
                  :src="getAssetsFile('sjgl', item.pollutionIcon)" />
                <div class="sjzl-bottom-left-cont-box-item-bottom-text">{{ item.pollutionNum }}</div>
              </div>
            </div>
          </div>
          <div class="sjzl-bottom-left-cont-echart">
            <!-- 修复容器宽度样式 -->
            <div ref='zjechart' style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </div>
      <div class="sjzl-bottom-right">
        <div class="sjzl-bottom-left-title">计划完成率</div>
        <div style="width: 100%; height: 100%" class="sjzl-bottom-right-echart" ref="yhechart"></div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { getAssetsFile } from '@/utils/compnt'
import * as echarts from 'echarts'
import { getoveranaly, getoverprogram, getovercompletion, getoverline } from '@/api'


const sjzlTopContentItemTitle = ref([])

const zjechart = ref()
const yhechart = ref()

let zjechartinit = null
let yhechartinit = null

//
const PlanOverview = ref([])


// 更新图表配置

const updateZjechart = async () => {
  if (!zjechart.value) return;
  const { data } = await getoverline()
  let xAxisdata = data.dateYear
  let seriesdata = data.polyline.map((item) => {
    return {
      name: item.planType,
      type: 'line',
      smooth: true,
      symbolSize: 0,
      areaStyle: {
        opacity: 0.5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'RGBA(21, 44, 85, 1)'
          },
          {
            offset: 1,
            color: '#ffffff00'
          }
        ])
      },
      data: item.playNum
    }
  })




  const option = {
    tooltip: {
      trigger: 'axis',
      // 使用HTML标签和内联样式来模拟CSS效果
      formatter: (params) => {
        return generateH5Component(params)
      },
      // 设置tooltip的样式
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      extraCssText: `
        width: (135/16) rem;
        height: (110/16) rem;
        background: linear-gradient(322deg, #FDFEFF 0%, #F4F7FC 100%);
        box-shadow: 0px 8px 15px 0px rgba(167, 200, 255, 0.5), inset 0px 2px 5px 0px rgba(229, 237, 250, 0.9), inset 0px -2px 9px 0px rgba(229, 237, 250, 0.5);
        border-radius: 5px;
        border: 1px solid;
        backdrop-filter: blur(3.78px);
        padding: 0;
      `,
      // 隐藏默认的axisPointer
      axisPointer: {
        type: 'none'
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xAxisdata
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: seriesdata,
    grid: {
      top: 0,    // 距离容器顶部40px
      bottom: 32, // 距离容器底部50px
      left: 0,   // 距离容器左侧60px
      right: 0   // 距离容器右侧30px
    },
  };
  zjechartinit.setOption(option)
}


// ... existing code ...
const updateYhechart = async () => {
  if (!yhechart.value) return;

  const { data } = await getovercompletion()
  let optiondata = data.map((item) => {
    return {
      value: item.rateNum,
      name: item.rateName
    }
  })
  const option = {
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: '10%',
      top: '20%',
      icon: 'circle',
      textStyle: {
        color: "#fff"
      },
      itemStyle: {
        borderWidth: 0
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '70%'],
        right: "20%",
        bottom: '20%',
        label: {
          show: false,
          // position: 'none', 
          position: 'center'
        },
        labelLine: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'normal',
            color: '#fff',
            formatter: '{b}: {c}'
          }
        },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 2
        },
        data: optiondata
      }
    ]
  };

  yhechartinit.setOption(option)
}
// ... existing code ...

// 初始化图表
const initZjechart = async () => {
  if (!zjechart.value) return;

  // 销毁之前的实例（如果有）
  if (zjechartinit) {
    zjechartinit.dispose();
  }
  zjechart.value.clientWidth;
  // 初始化 ECharts 实例，设置为容器大小
  zjechartinit = echarts.init(zjechart.value);
  updateZjechart();
}

const initYhechart = async () => {
  if (!yhechart.value) return;

  // 销毁之前的实例（如果有）
  if (yhechartinit) {
    yhechartinit.dispose();
  }
  yhechart.value.clientWidth;
  // 初始化 ECharts 实例，设置为容器大小
  yhechartinit = echarts.init(yhechart.value);
  updateYhechart();
}




// 处理窗口大小变化
const handleResize = () => {
  if (zjechartinit) {
    zjechartinit.resize();
  }
  if (yhechartinit) {
    yhechartinit.resize()
  }
}

// 以下是使用模板字符串生成 H5 组件的方法示例
const generateH5Component = (params) => {
  // 检查params是否有效
  if (!params || !Array.isArray(params) || params.length === 0) {
    return `<div class="tooltipcon"><div class='tooltipconbox'><div class='tooltipconboxtop'>暂无数据</div></div></div>`;
  }

  let loopContent = '';

  // 遍历params数组生成内容
  params.forEach((item, index) => {
    loopContent += `
      <div class='tooltipconboxitem'>
        <div class='tooltipconboxitemleft'>
          <div style='background:${item.color}' class='tooltipconboxitemlefticon'></div>
          <div class='tooltipconboxitemlefttext'>${item.seriesName}</div>
        </div>
        <div class='tooltipconboxitemright'>${item.value}</div>
      </div>
    `;
  });

  return `
    <div class="tooltipcon">
      <div class='tooltipconbox'>
        <div class='tooltipconboxtop'>${params[0].axisValueLabel}</div>
        ${loopContent}
      </div>
    </div>
  `;
};

const getoveranalyapi = async () => {

  const { data } = await getoveranaly()
  sjzlTopContentItemTitle.value = data
}

const getoverprogramapi = async () => {
  const { data } = await getoverprogram()
  PlanOverview.value = data

}

// 组件挂载时初始化图表
onMounted(() => {
  initZjechart();
  initYhechart()
  getoveranalyapi()
  getoverprogramapi()
  window.addEventListener('resize', handleResize);
})

// 组件卸载时清理事件监听器和图表实例
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  if (zjechartinit) {
    zjechartinit.dispose();
    zjechartinit = null;
  }
})
</script>

<style lang="less" scoped>
.sjzl-con {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 725px;

  .sjzl-top {
    width: 100%;
    height: 240px;
    margin-bottom: 24px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;

    .sjzl-top-title {
      height: 16px;
      font-family: PingFangSC, PingFang SC;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 16px;
      margin-top: 24px;
    }

    .sjzl-top-content {
      margin-top: 30px;
      height: 134px;
      display: flex;
      justify-content: space-between;

      .sjzl-top-content-item {
        width: 416px;
        background: linear-gradient(180deg, rgba(242, 249, 254, 0.04) 0%, rgba(194, 230, 255, 0.04) 100%);
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .sjzl-top-content-item-title {
          color: #fff;
          display: flex;
          flex-direction: column;
          height: 100%;
          justify-content: space-around;
          margin-left: 20px;

          &-text {
            height: 23px;
            font-family: PingFangSC, PingFang SC;
            font-size: 16px;
          }

          &-num {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 30px;
          }
        }

        .sjzl-top-content-item-img {
          width: 192px;
          height: 104px;
          margin-right: 21px;
        }
      }
    }
  }

  .sjzl-bottom {
    width: 100%;
    height: 461px;
    display: flex;
    justify-content: space-between;

    .sjzl-bottom-left {
      width: 1120px;
      height: 461px;
      background: rgba(8, 26, 48, 0.54);
      border-radius: 4px;
      border: 1px solid;
      border-image: linear-gradient(149deg, rgba(35, 133, 223, 0.15), rgba(35, 133, 223, 0.65)) 1 1;
    }

    .sjzl-bottom-right {
      width: 630px;
      height: 461px;
      background: rgba(8, 26, 48, 0.54);
      border-radius: 4px;
      border: 1px solid;
      border-image: linear-gradient(149deg, rgba(35, 133, 223, 0.15), rgba(35, 133, 223, 0.65)) 1 1;
    }

    .sjzl-bottom-left-title {
      height: 16px;
      font-family: PingFangSC, PingFang SC;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 16px;
      margin-top: 24px;
      margin-left: 22px;
      margin-bottom: 28px;
    }


    .sjzl-bottom-left-cont {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 361px;

      .sjzl-bottom-left-cont-box {
        height: 91px;
        width: 783px;
        margin-left: 46px;
        display: flex;
        justify-content: space-between;

        .sjzl-bottom-left-cont-box-item {
          width: 204px;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          &-top {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #687494;
            line-height: 30px;
          }

          &-bottom {
            display: flex;
            align-items: center;

            &-imgs {
              width: 48px;
              height: 48px;
            }

            &-text {
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 30px;
              color: #FFFFFF;
              line-height: 30px;
              margin-left: 12px;

            }
          }
        }


      }

      .sjzl-bottom-left-cont-echart {
        height: 218px;
        margin-left: 38px;
        margin-right: 28px;
        // 移除了背景色以便看到图表
      }
    }

    .sjzl-bottom-right-echart {
      width: 630px;
      height: 440px;
    }
  }



}

:deep(.tooltipcon) {
  .tooltipconbox {
    margin: 6px;
    // background: red;

    .tooltipconboxtop {
      width: 50px;
      height: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 9px;
      color: #1D2129;
      line-height: 15px;
      text-shadow: 0px 8px 15px rgba(167, 200, 255, 0.5);
    }

    .tooltipconboxitem {
      width: 124px;
      height: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.31);
      box-shadow: 0px 8px 15px 0px rgba(167, 200, 255, 0.5), 5px 0px 15px 0px rgba(34, 87, 188, 0.1);
      border-radius: 3px;
      margin: 3px 0;
      padding: 0 3px;

      .tooltipconboxitemleft {
        display: flex;
        color: #4E5969;
        align-items: center;

        .tooltipconboxitemlefticon {
          width: 8px;
          height: 8px;

          border-radius: 50%;
          margin-left: 3px;
        }

        .tooltipconboxitemlefttext {
          font-size: 10px;
          margin-left: 4px;
        }
      }

      .tooltipconboxitemright {
        font-size: 10px;
        color: #1D2129;
        margin-right: 8px;
      }
    }
  }
}
</style>
